<template>
	<view class="baseTitle-box">
		<view class="m-title-box">
			<text class="m-title">{{ props.title }}</text>
			<text class="m-line"> </text>
		</view>
		<view class="more-box" @click.stop="handleToClick">
			<text class="more">更多</text>
			<image class="more_row" src="@/static/index/ic_more.png" mode="heightFix"></image>
		</view>
	</view>
</template>
<script setup>
const props = defineProps({
	title: {
		type: [Object, String],
		default: () => {
			return "--"
		}
	}
})

const emits = defineEmits(['moreClick'])

const handleToClick = () => {
	emits('moreClick', props.title)
}
</script>
<style lang="scss" scoped>
.baseTitle-box {
	display: flex;
	margin-top: 30rpx;
	flex-direction: row;
	justify-content: space-between;

	.m-title-box {
		display: block;
		margin-left: 20rpx;
		position: relative;
		width: fit-content;

		.m-title {
			font-size: 36rpx;
			color: #1E1E1E;
		}

		.m-line {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;
			right: 0;
			height: 10rpx;
			background: linear-gradient(270deg, rgba(203, 216, 253, 0) 0%, #8CAFDB 100%);
		}
	}

	.more-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		&:active {
			opacity: 0.7;
		}

		.more {
			font-size: 26rpx;
		}

		.more_row {
			display: block;
			margin-right: 20rpx;
			margin-left: 9rpx;
			width: 9rpx;
			height: 15rpx;
		}
	}

}
</style>